Trò chơi trí óc trong JavaScript
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Rush Back | BrainStorm</title>
6 <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
7 <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
8 <link rel="stylesheet" href="game-css.css" type="text/css">
9 <link rel="stylesheet" href="../Alert/alertcss.css">
10 <script src="games-js.js" type="text/javascript"></script>
11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.js"></script>
12 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
13
14 <script type="text/javascript">
15 var i = 1;
16 var count = 0;
17 var randomNum = 0;
18 var previousRandomNum = 0;
19 var ansCheck = 0;
20 var img_value = [1, 2, 2, 2, 3, 3, 4, 5, 5, 5, 5, 1, 1, 4, 4, 4, 4, 5, 3, 3, 3, 2, 2, 1, 1, 1, 4, 5, 5, 5];
21 function checker(check) {
22 alert(img_value[previousRandomNum] + " " + img_value[randomNum]);
23 if (i <= 30) {
24 if (i === 1){
25 document.getElementById('No').style.display = "inline-block";
26 document.getElementById('Yes').innerHTML = "YES";
27 i++;
28 }
29 else {
30 if (img_value[previousRandomNum] === img_value[randomNum])
31 ansCheck = 1;
32 else
33 ansCheck = 0;
34
35 if (check === ansCheck) {
36 if (count > 750){count = count + 150;}
37 else if (count > 350 && count < 750){count = count + 100;}
38 else {count = count + 50;}
39 document.getElementById('flip-img').classList.add("on");
40 document.getElementById('correct').classList.add("on");
41 setTimeout(function(){
42 document.getElementById('correct').classList.remove("on");
43 document.getElementById('flip-img').classList.remove("on");
44 }, 300);
45 }
46 else {
47 document.getElementById('flip-img').classList.add("on");
48 document.getElementById('wrong').classList.add("on");
49 setTimeout(function(){
50 document.getElementById('wrong').classList.remove("on");
51 document.getElementById('flip-img').classList.remove("on");
52 }, 300);
53 }
54 i++;
55 }
56 }
57
58 previousRandomNum = randomNum;
59 randomNum = getRandomInt(1,29);
60 if (i <= 30) {
61 if (count === 0){document.getElementById('score').innerHTML = "000";}
62 else {document.getElementById('score').innerHTML = "" + count;}
63 document.getElementById('score1').innerHTML = "" + count;
64 document.getElementById('scoreDB').value = count;
65 document.getElementById('image').src = "rush-back-img/Picture" + (randomNum + 1) + ".png";
66 }
67 if (i === 31) {
68 document.getElementById('score1').innerHTML = "" + count;
69 document.getElementById('scoreDB').value = count;
70 document.getElementById('main-screen').style.display = "none";
71 document.getElementById('end-screen').classList.add("on");
72
73 var score = 0;
74 if (score <= count){
75 document.getElementById('best-score').classList.add("on");
76 }
77 }
78 }
79
80 function end_screen() {
81 document.getElementById('score1').innerHTML = "000";
82 }
83 </script>
84
85 <script type="text/javascript">
86 $(document).ready(function(){
87 var lastScore = $.cookie("rushBack");
88 $("#lastScore").text(lastScore);
89
90 var per = $.cookie("focus");
91 $("#per").text(per);
92 });
93 </script>
94
95 </head>
96 <body style="background-color: #441d61">
97
98 <div id="start-screen">
99 <div class="row">
100 <div class="col half-wider"><h1>Rush Back <span class="info">(Focus)</span></h1></div>
101 <div class="col half-narrow">
102 <a id="ON" class="btn-circle hoverable" onclick="video_on()"><i class="material-icons"></i></a>
103 <a id="OFF" class="btn-circle hoverable off" onclick="video_off()"><i class="material-icons"></i></a>
104 </div>
105 </div>
106
107 <video id="video" width="500" height="415" controls>
108 <source src="true-color-img/Rec.mp4" type="video/mp4">
109 </video>
110
111 <div id="info" class="card">
112 <div class="row">
113 <div class="col half">
114 <span class="material-icons blue-text"></span>
115 <span id="lastScore" class="num">7777</span>
116 <span class="info black-text">LAST SCORE</span>
117 </div>
118 <div class="col half">
119 <span class="material-icons blue-text"></span>
120 <span id="per" class="num">50%</span>
121 <span class="info black-text">FOCUS</span>
122 </div>
123 </div>
124 <div class="divider"></div>
125
126 <div class="row black-text left-align">
127 <span class="num"> GAME BENEFIT :</span>
128 <ul>
129 <li>Stimulates your ability to maintain focus and avoid distractions.</li>
130 <li>Challenges your pattern detection abilities.</li>
131 <li>Exercises your ability to temporarily hold information im memory.</li>
132 </ul>
133 </div>
134
135 <div class="row black-text left-align">
136 <span class="num"> Instructions <span class="info black-text">(click on info button for video)</span> :</span>
137 <ol>
138 <li>Memorize the card.</li>
139 <li>Does the current card match the card that came before it?</li>
140 </ol>
141 </div>
142
143 </div>
144
145 <a id="button-start" class="btn start hoverable">PLAY GAME</a>
146 </div>
147
148 <div id="main-screen" class="off">
149 <div class="row">
150 <span class="timer">
151 <a id="button-stop" class="btn pause left material-icons"></a>
152 <a id="button-play" class="btn pause left material-icons off"></a>
153 00:<span id="seconds">59</span>
154 <a id="score" class="btn score right">000</a>
155 </span>
156 </div>
157
158 <div id="wait-screen" class="card waiting">
159 <div class="waring">
160 <span class="waring-i"></span>
161 <span class="waring-dot"></span>
162 </div>
163 <h1 class="black-text">Are you sure to exit?</h1>
164 <span class="num black-text">You will not able to record your score!</span>
165 <div class="row" style="margin-top: 40px">
166 <a id="button-no" class="btn green">No</a>
167 <a class="btn red" onclick="end_screen(); flip_endCard();">Yes</a>
168 </div>
169 </div>
170
171 <div id="flip-img" class="card waiting transparent">
172 <a id="correct" class="btn-circle check green"><i class="material-icons"></i></a>
173 <a id="wrong" class="btn-circle check red"><i class="material-icons"></i></a>
174 </div>
175
176 <img id="image" src="rush-back-img/Picture1.png">
177 <br/>
178 <div class="center-align">
179 <a id="No" class="btn red off" onclick="checker(0)">NO</a>
180 <a id="Yes" class="btn green" onclick="checker(1)">OK</a>
181 </div>
182
183 </div>
184
185 <div id="end-screen" class="off">
186 <div class="card">
187 <div class="row">
188 <span id="best-score" class="num green-text off">BEST NEW SCORE</span>
189 <span class="material-icons blue-text"></span>
190 <h1 class="black-text" id="score1" style="margin: 0">000</h1>
191 <span class="info black-text">YOUR SCORE</span>
192 <div class="divider"></div>
193
194 <div class="card bg-green">
195 <div class="row left-align">
196 <span class="num white-text">SUCCESS RATE :</span>
197 <ul><span class="info">Your success rate is 72%. Well done!
198 Only 18% of the users at this rank do this well.</span></ul>
199 </div>
200 </div>
201
202 <div class="divider"></div>
203 </div>
204 <div class="row">
205 <form action="../gameScore" method="post">
206 <input name="gameId" type="hidden" value="rushback">
207 <input name="score" id="scoreDB" type="hidden" value="0">
208 <input class="btn continue hoverable" type="submit" value="Continue"></input>
209 </form>
210 </div>
211 </div>
212 </div>
213
214 </body>
215 </html>
